<template>
  <div class="singer-detail">
<!--    歌手基本信息-->
    <div class="base_info">
      <div class="info_left">
        <img v-lazy="singer.img1v1Url" alt="">
      </div>
      <div class="info_right">
        <div class="name">{{singer.name}}</div>
        <div class="alias">{{singer.alias[0]}}</div>
        <div class="info_btn">
          <span>
            <img src="~@/assets/img/singerdetail/add.svg" alt="">
            收藏
          </span>
          <span>
            <img src="~@/assets/img/singerdetail/person.svg" alt="">
            个人主页
          </span>
        </div>
        <div class="info_count">
          <span>单曲数:{{singer.musicSize}}</span>
          <span>专辑数:{{singer.albumSize}}</span>
          <span>MV数:{{singer.mvSize}}</span>
        </div>
      </div>
    </div>
<!--    导航栏-->
    <div class="router_bar">
      <NavBarItem :link="'/album/id='+singer.id">专辑</NavBarItem>
      <NavBarItem :link="'/MV/id='+singer.id">MV</NavBarItem>
      <NavBarItem :link="'/describe/id='+singer.id">歌手详情</NavBarItem>
      <NavBarItem :link="'/similar/id='+singer.id">相似歌手</NavBarItem>
    </div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <keep-alive>
      <router-view v-if="!$route.meta.keepAlive"/>
    </keep-alive>
  </div>
</template>

<script>
  import NavBarItem from "@/components/content/navbar/NavBarItem";
  import {home} from "@/network/home";

  export default {
    name: "SingerDetail",
    components:{
      NavBarItem,
    },
    data(){
      return {
        // 歌手信息
        singer:{
          id: this.$route.params.id, //id
          alias:[],   //别名
          img1v1Url:'',  //图片
          name:'',    //名字
          mvSize:'',  //mv数量
          musicSize:'', //单曲数量
          albumSize:'', //专辑数量
        },

      }
    },
    watch:{
      //监听歌手id是否变化，变化就更新数据
      '$route.params.id'(){
        console.log(this.$route.params.id);
        this.getSingerInfo(this.$route.params.id)
      },
    },
    created() {
      //请求歌手信息数据
      this.getSingerInfo(this.singer.id)
    },
    methods:{
      // 获取歌手信息的函数
      getSingerInfo(id){
        home.getSingerInfo(id).then(res => {
          this.singer = res.data.artist
        })
      },
    },
  }
</script>

<style scoped>
/*主盒子*/
.singer-detail{
  position: fixed;
  top: 45px;
  left: 137px;
  bottom: 50px;
  right: 0;
  padding: 20px;
  background-color: #FFFFFF;
}
/*歌手基本信息*/
.base_info{
  display: flex;
  padding-bottom: 30px;
}
.info_left{
  width: 180px;
  height: 180px;
}
.info_left img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.info_right{
  padding-left: 20px;
  padding-top: 5px;
}
.info_right .name{
  font-size: 20px;
  font-weight: 550;
  color: #2f2c2c;
}
.info_right .alias{
  font-size: 14px;
  line-height: 32px;
}
.info_right .info_btn span{
  padding: 6px 12px;
  margin-right: 15px;
  border-radius: 13px;
  font-size: 14px;
  border: 1px solid #ced4d7;
  cursor: pointer;
}
.info_right .info_btn span:hover{
  background-color: #F2F2F2;
}
.info_right .info_btn img{
  position: relative;
  top: 4px;
  width: 20px;
}
.info_right .info_count span{
  display: inline-block;
  font-size: 13px;
  margin-top: 20px;
  margin-right: 20px;
}
/*导航栏*/
.router_bar{
  display: flex;
}
</style>
